<!DOCTYPE html>
<div class="card-pf kie-card-small-height" data-field="roles">
    <div class="card-pf-heading">
        <div class=" kie-card__toolbar">
            <div class="kie-toolbar__group">
                <select id="status" class="selectpicker" data-width="100px" data-field="filter-select"></select>
            </div>
        </div>
        <h2 class="card-pf-title">
            <span data-i18n-key="Roles"></span>
            <span class="badge" data-field="roles-badge" data-toggle="tooltip" data-placement="bottom" title="..."></span>
        </h2>
    </div>
    <div class="card-pf-body ">
        <div class="row">
            <!-- Roles -->
            <div class="col-xs-12">

                <div class="kie-scrollbox" data-field="scrollbox">
                    <div class=" list-group kie-list-view--embedded" data-field="role-list"></div>
                    <div class="card-pf-body kie-card-body--embedded" data-field="empty-list-item">
                        <div href="" class="card-pf-link-with-icon"><span class="pficon pficon-info"></span>
                            <span data-i18n-key="NoCaseRolesFound"></span>
                        </div>
                    </div>
                </div>
                <div data-field="pagination"/>
            </div>

        </div>
    </div>
    <div class="card-pf-footer hidden" data-field="footer">
        <p>
            <a href="#" class="card-pf-link-with-icon" data-field="group-add" style="margin-left: 15px;">
                <span class="pficon pficon-add-circle-o"></span><span data-i18n-key="AddGroup"></span>
            </a>
        </p>
    </div>
</div>